import React                from 'react';
import {connect}            from 'react-redux';
import {Link}               from 'react-router';
import Dropdown             from 'rc-dropdown';
import Menu, {
  Item as MenuItem, Divider
}                           from 'rc-menu';
import Icon                 from './components/icons/index';
import Avatar               from './components/Avatar';
import {Model}              from '../api';

function mapStateToProps(state) {
  let sessionUser = state.user.sessionUser || new Model();
  return {
    avatar: sessionUser.get('avatar'),
    username: sessionUser.username
  };
}

export class NoteTopbar extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="NoteTopBar">
        <ul className="menus left">
          <li>
            <Link to="/"><img src="/static/images/logo/logo-white.png" style={{height: 16}}/></Link>
          </li>
        </ul>

        <ul className="menus right">
          <li className="item">
            <Dropdown trigger={['click']}
                      overlay={(
                        <Menu selectedKeys={[]}>
                          <MenuItem key="1">
                            <span >个人信息</span>
                          </MenuItem>
                          <MenuItem key="2">
                            <Link to="/setting/profile">账号设置</Link>
                          </MenuItem>
                          <MenuItem key="3">
                            <span >关于我们</span>
                          </MenuItem>
                          <MenuItem key="4">
                            <span >意见反馈</span>
                          </MenuItem>
                          <Divider />
                          <MenuItem key="5">
                            <a href="/user/sign-out">退出登录</a>
                          </MenuItem>
                        </Menu>
                      ) }
                      animation="slide-up">
              <a style={{cursor: 'pointer'}}>
                {this.props.avatar && <Avatar src={this.props.avatar} size={32} style={{margin: 9, float: 'left'}}/>}
                {this.props.username}
                <Icon type="arrow-down-b" style={{margin: '0 0.5rem'}}/>
              </a>
            </Dropdown>
          </li>
          <li className="item">
            <a href={`${window.location.origin}`}>官网</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
// Implement map dispatch to props
)(NoteTopbar)
